<template>
{{ mValue || cValue }}
</template>
<script setup lang="ts">
import { PropType, computed, onMounted, watch } from 'vue';
import { MTableColumnType } from '../../Table/types';
import { requestData } from '../../Form';
import { useSelectStore } from '/@/store/modules/select';
import { DefaultOptionType } from 'ant-design-vue/lib/select';
const selectStore = useSelectStore();
const props = defineProps({
  data: {
    // 当前行数据
    type: Object
  },
  column: {
    // 列定义数据
    type: Object as PropType<MTableColumnType>
  }
})
/**
 * 获取缓存key前辍
 */
const getCacheKeyPrefix = () =>{
  let cacheKeyPrefix = props.column?.componentProps?.cacheKeyPrefix
  if(!cacheKeyPrefix) {
    // Select_columnName
    cacheKeyPrefix = props.column?.component + "_" + (props.column?.key || props.column?.dataIndex)
  }
  return cacheKeyPrefix;
}
const cValue = computed(()=>{
  let v = props.data?.text
  props.column?.componentProps?.options?.forEach((item: any)=>{
    if(item.value == v) {
      v = item.label
    }
  })
  return v
})
const mValue = computed(()=>{
    // 1,2,3
    // [1,2,3]
    let v = props.data?.text
    if(!v) return v;
    const key = getCacheKeyPrefix() + "_" + v;
    const options = selectStore.getSelectData(key)
    const arr: Array<string | number | null | undefined>= []
    if(typeof v === 'string') {
      arr.push(...v.split(','))
    } else {
      // 数组类型
      arr.push(...v)
    }
    return options?.filter((item: DefaultOptionType)=>arr.includes(item.value)).map((item: DefaultOptionType)=>item.label).join(',')
  })
// 设置值
const setValue = () =>{
  const api = props.column?.componentProps?.api
  if(api) {
    const includeIds : Array<any>= []
    const text = props.data?.text
    if(text){
      if(text instanceof Array) {
        includeIds.push(...text)
      } else {
        includeIds.push(text)
      }
      const key = getCacheKeyPrefix() + "_" + text
      selectStore.requestData(key,api,{
        includeType: 2,
        includeIds,
       ...props.column?.componentProps?.params
      },requestData)
    }
  }
}
watch(()=>props.data?.text,()=>{
  setValue()
})
onMounted(()=>{
  setValue()
})
</script>
<style lang="less" scoped>

</style>